<template>
	
	<view class="content">
		<view>
			<uni-popup ref="popup" type="dialog">
				<uni-popup-dialog 
					type="success"
					cancelText="关闭" 
					confirmText="同意" 
					title="通知" 
					:content="content"
					:duration="2000" 
					:before-close="true" 
					@close="close" 
					@confirm="confirm"
			></uni-popup-dialog>
			
			</uni-popup>
		</view>
		<view class="box-bg">
			<uni-nav-bar 
				shadow 
				title="写日记" 
				left-icon="arrow-left"
				right-icon="checkmarkempty"
				@clickLeft="back"
				@clickRight="save('success')"
				height="100rpx"
				fixed="true"
				color="white"
				backgroundColor="#4a87b6"
			/>
			<view class="journalTitle">
				<textarea 
					maxlength=15
					placeholder="请输入标题"
					
					v-model="title"
					@input="updateTitle"
					></textarea>
			</view>
		</view>
		<!--
			taskinfodtv 初始化数据 回显用 getbgyxinfo接收的数据中有html富文本内容 和可用于回显的data数据 可以分别保存
			handleUpload 图片上传逻辑 上传成功后返回图片地址即可
		    getbgyxinfo(e) 用于接收html数据和原始数据，
			showdone控制完成按钮是否显示，
			uploadurl设置图片和视频上传地址，
			filename设置上传字段名
			所有元素支持长按菜单
		-->
		<bgyxedit 
			:handleUpload="handleUpload" 
			@bgyxchange="getbgyxinfo" 
			:taskinfodtv="initData" 
			:showdone="true"
			:journalDate="reqDate"
			filename="img">
		</bgyxedit>
		
	</view>
</template>

<script>
	import bgyxedit from '@/components/bgyxedit/bgyxedit.vue';
	import {getTodayJournal,addJournal,queryByDate,retDate} from '@/api/journal.js';
	export default {
		data() {
			return {
				initData:[{type:'text',value:'',f:false}],
				id:"",
				token:"",
				title:"",
				type: 'center',
				msgType: 'success',
				messageText: '这是一条成功提示',
				value:'',
				content:"",//提示框内容
				imgPath:"",
				htmlContent:"",
				date:"",
				journalData:{
					"title":"",
					"text":"",
					"date":"",
					"html":"",
					"id":"",
					"token":"",
					"taskinfodtv":""
				},
				//修改用
				reqDate:"",
				journalId:""
			}
		},
		components: {
			bgyxedit
		},
		onLoad(e) {
			this.getMessage()
			this.date = this.getCurrentDate()
		
			//日历界面传过来的
			if(e.date!=null){
				if(e.journalId=="undefined"){
					//从日历传的无日记记录的，显示
					this.getRetDate(e.date)
					
				}else if(e.journalId!="undefined"){
					
					this.getRetDate(e.date)
					this.journalId = e.journalId
					this.selectJournalByJournalId()
				}
			}else if(e.journalId==null){
				this.getTodyDate()
				
			}else if(e.journalId!=null){
				
				this.journalId = e.journalId
				this.selectJournalByJournalId()
			}
			
		},
			
		methods: {
			//返回日期
			getRetDate(date){
				console.log("调用ret")
				retDate({
					"date":date,
					"token":this.token
				}).then(res=>{
					this.initData = [{type:'text',value:'',f:false}]
					this.reqDate = res.data.data
				})
			},
			//标题修改，传入组件
			updateTitle(e){
				this.journalData.title = e.detail.value
			},
			//修改
			selectJournalByJournalId(){
				queryByDate({
					"id":this.journalId,
					"authorId":this.id,
					"token":this.token
				}).then(res=>{
					if(res.data.data.origin!=null){
						this.initData=res.data.data.origin
						this.title = res.data.data.title
						this.reqDate = res.data.data.date
						console.log("修改后的数据是")
						console.log(this.journalData)
					}
				})
			},
			//从缓存获取信息
			getMessage(){
				this.id=uni.getStorageSync("id"),
				this.token=uni.getStorageSync("authorization")
			},
			// 获取今天的日记
			getTodyDate(){
				getTodayJournal({
					"id":this.id,
					"date":this.date,
					"token":this.token
				}).then(res=>{
					if(res.data.data!=null){
						this.initData=res.data.data.origin
						this.title = res.data.data.title
					}
					
				})
			},
			//获取当前时间
			getCurrentDate() {  
			    var date = new Date();  
			    var year = date.getFullYear();  
			    var month = date.getMonth() < 9 ? "0" + (date.getMonth() + 1) : (date.getMonth() + 1); // getMonth() is zero-based  
			    var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();  
			    return year + "-" + month + "-" + day;  
			},
			//图片上传
			handleUpload:async function(e){
				console.log(e)
				uni.showLoading({
					title: '加载中'
				});
				const res = await uniCloud.uploadFile({
					filePath:e,
					cloudPathAsRealPath:true,
					cloudPath:"journal/"+uni.getStorageSync("id")+"/journal"+Date.now()+".png"
					
				}).then(res=>{
					uni.hideLoading();
					console.log(res)
					this.imgPath = res.fileID
				})
				return new Promise(r=>{
					setTimeout(()=>{
						r(this.imgPath)
					},2000)
				})
			},
			//富文本
			getbgyxinfo:function(e){
				
				//获取富文本内容，默认模式拼接的html
				const title = this.title;
				var text = "";
				for(let i =0;i<e.data.length;i++){
					if(e.data[i].type=="text"){
						text+=e.data[i].value;
					}
				}
				const date = e.date;
				const html = e.html;
				const data = {
					"title":title,
					"text":text,
					"date":date,
					"html":html,
					"id":this.id,
					"token":this.token,
					"taskinfodtv":e.data
				}
				this.journalData = data
				console.log("执行改变事件")
				console.log(data)
				
				// //获取原始数据,可自行循环拼接html数据
				// console.log(e.data)
				// this.htmlContent = e.html
			},
			//返回上一页
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			save(type){
				if(this.hasData(this.journalData)){
					addJournal(this.journalData).then(res=>{
						console.log(res)
					})
					this.content = "保存成功"
					this.$refs.popup.open()
				}else{
					console.log("没有数据")
					this.content = "请修改后在进行保存吧~"
					this.$refs.popup.open()
				}
				
				
				
				
			},
			// 检查对象是否有数据的函数
			hasData(obj) {
			    for (let key in obj) {
			        if (obj.hasOwnProperty(key) && obj[key] !== "") {
			            return true; // 如果有任何一个属性有数据，则返回true
			        }
			    }
			    return false; // 如果所有属性都没有数据，则返回false
			},
			/**
			 * 点击取消按钮触发
			 * @param {Object} done
			 */
			close() {
				this.$refs.popup.close()
			},
			/**
			 * 点击确认按钮触发
			 * @param {Object} done
			 * @param {Object} value
			 */
			confirm(value) {
				this.$refs.popup.close()
			}
		}
	}
</script>

<style lang="scss">
	
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.box-bg{
			width: 100%;
			
		}
		.journalTitle{
			width: 100%;
			height: 5vh;
			// background-color: rebeccapurple;
			text-align: center;
			textarea{
			
				height: 100%;
				width: 100%;
				line-height: 5vh;
				border-bottom: 1rpx solid lightslategrey;
				font-size: 2vh;
				font-weight: bold;
			}
		}
	}



	
</style>
